﻿<template>
  <div class="git_Exchange_contain" ref="git_contain">
    <Header_other v-bind:header_name="header_name"></Header_other>
    <!-- 弹出层 S -->
    <layer_give_friend v-show="layer_give_friend_data" @newNodeEvent="layer_give_friend_f"></layer_give_friend>
    <!-- 弹出层 E -->

    <!-- 弹出层 other S -->
    <give_other v-show="give_other_data" @newNodeEvent ="give_other"></give_other>
    <!-- 弹出层 other E -->
    <div class="main_container">
      <div class="main_container_header clearfix">
          <div class="main_container_header_act">已兑换</div>
          <div class="">发货中</div>
          <div class="">已发货</div>
          <img src="../../../static/img/nav_fenhao.png" class="wenhao_img">
      </div>
      <div id="wrap_scroller">
        <scroller :on-refresh="refresh"
                  :on-infinite="infinite" class="clearfix">
          <!-- content goes here -->
          <div class="" ref="el" id="scroller">
            <div class="box">
              <div class="box_header_wrap clearfix">
                <img src="../../../static/img/login_bg.png" class="box_img_s">
                <ul class="box_list">
                  <li class="border_L bor_bot">火烧明信片</li>
                  <li class="bor_bot">单价119积分</li>
                  <li class="border_L ">火烧明信片</li>
                  <li class="">单价119积分</li>
                </ul>
              </div>
              <div class="box_bottom_wrap">
                <div class="f_L box_base_btn" v-on:click.self="layer_give_friend_f">
                  赠有缘人
                </div>
                <div class="f_L box_base_btn m_L_15" v-on:click.self="give_other" >
                  赠予好友
                </div>
                <div class="f_R box_base_btn red_c" v-on:click.self="goTo_letter_man">
                  申请发货
                </div>
              </div>
            </div>
          </div>
          <!-- content goes here -->
        </scroller>
      </div>
      </div>
    </div>
</template>

<script>
import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  import Header_other from "../header_other/Header_other.vue";
  //limit_Scroll
  import limit_scroll from "../../../static/js/limit_scroll.js"

  //layer give_friend
  import layer_give_friend from "./My_gift_give_friend.vue"

  //layer give_other
  import give_other from './My_gift_give_other.vue'
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      show_layer:false,
      get_layer_show: this.$store.getters.get_layer_show,
      layer_show: false,
      header_name: "我的兑换",
      layer_give_friend_data: false,
      give_other_data: false,
    }
  },
  ...mapActions([
    "thom_redirect",
  ]),
  ...mapMutations([
     "Change_certain_layer"
  ]),
  mounted: function () { 
    limit_scroll(this.$refs.el, this.$refs.git_contain);
  },
  methods: {
    //下拉
    refresh: function (done) {
      setTimeout(function () {
        done();
      },1000)
    },
    //上啦
    infinite: function (done){ 
      setTimeout(function () {
        done(true);
      },1000)
    },
    //弹出层 
    layer_give_friend_f: function () {
      this.layer_give_friend_data = !this.layer_give_friend_data;
    },
    give_other: function () {
      this.give_other_data = !this.give_other_data
    },
    hide_detail_1: function () {
      this.layer_show = false;
    },
    //页面跳转
    goTo: function () {
      this.$store.dispatch("thom_redirect",{name:"/letter/SucLetter",router:this.$router});
    },
    open_certain_btn:function () {
        //show_layer 判断显示
      this.$store.dispatch("thom_redirect",
      {
          name:"/Index_main/Wrap_certain_layer/Certain_layer_input",router:this.$router
      });
    },
    goTo_letter_man:function() {
      this.$store.dispatch("thom_redirect",
        {
          name: "/Letter_man", router: this.$router
        });
    }
  },
  components: {
    Header_other,
    layer_give_friend,
    give_other
  }
}
</script>
<style scoped>
  #wrap_scroller{
      //transform:translateY(20px);
      height:28.4rem;
  } 
  .box_bottom_wrap {
    margin-top: 0.3rem;
    padding-left: 5%;
    padding-right: 5%;
  } 
  .m_L_15 {
    margin-left: 2vw;
  } 
  .box_bottom_wrap .red_c {
    color: #e85454;
    border: 2px solid #e85454;
  }
  .box_base_btn {
    width: 20%;
    font-size: 0.7rem;
    height: 1.25rem;
    line-height: 2;
    border-radius: 2vw;
    border: 2px solid #9f5c2f;
    color: #9f5c2f;
  } 
  .box_list li {
    width: 48%;
  }
  .box_list {
    border-radius:2vw;
    background-color: #eeeeee;
    flex-wrap: wrap;
    font-size: 0.7rem;
    line-height: 2.45rem;
    width: 11.75rem;
    display: flex;
  } 
  .box_header_wrap {
    padding-left:1.4vw;
    padding-top:0.35rem;
    display: flex;
    justify-content: space-between;
  }
  .bor_bot {
    border-bottom: 1px solid #dfdfdf
  }
  .border_L {
    border-right: 1px solid #dfdfdf;
  }
  .box_img_s {
    display:block;
    width: 4.75rem;
    height: 4.75rem;
    border-radius: 2vw;
    border: 2px solid #e9c7ac;
  } 
  .box {
    height: 7.5rem;
    width: 93%;
    background-color: #fff;
    border-radius: 2vw;
    margin: 0.6rem auto;
    box-shadow: 0 2px 8px 2px rgba(180, 180, 180, 0.62);
  } 
  .wenhao_img {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    position: absolute;
    top: 50%;
    right: 2vw;
    transform: translateY(-50%);
  }
   .main_container {
     height:30rem;
    background-color: #eeeeee;
  }
  .main_container_header {
    position:relative;
    height: 1.75rem;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    font-size: 0.7rem;
    line-height: 2.6;
    color: #b4b4b4;
  }
  .main_container_header_act {
    color: #9f5c2f;
  }
</style>